<template>
  <div class="notification-management">
    <menu-content-layout title="通知管理">
      <template v-slot:icon>
        <img src="~/assets/images/notification-management1.png" alt="">
      </template>

      <template v-slot:content>
        <div class="content">
          <div class="content-head">
            <div class="title">通知信息</div>
            <div class="program-1">短信</div>
            <div class="program-2">微信</div>
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in options" :key="index">
              <div class="title">{{ item.title }}</div>
              <div class="btn-1">
                <m-button :type="item.SMS ? 'filled' : 'grey'" @click='handleSMSClick(item)'>{{ item.SMS ? '开启' : '关闭' }}</m-button>
              </div>
              <div class="btn-2">
                <m-button :type="item.WX ? 'filled' : 'grey'" @click='handleWXClick(item)'>{{ item.WX ? '开启' : '关闭' }}</m-button>
              </div>
            </div>
          </div>
        </div>
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
  import MenuContentLayout from '@/components/common/menu-content-layout/MenuContentLayout'
  import MButton from '@/components/common/m-button/MButton'
  import { messageOptions, messageOptionsSet } from '@/request/api'

  export default {
    name: 'NotificationManagement',
    components: {
      MButton,
      MenuContentLayout
    },
    data() {
      return {
        options: [],
        uid: ''
      }
    },
    created() {
      this.getOptions()
    },
    methods: {
      getOptions() {
        messageOptions().then(res => {
          if (res.status === 200) {
            this.options = res.data.options
            this.uid = res.data.uid
          }
        }).catch(err => {
          this.$message.error(err.message)
        })
      },
      handleSMSClick(item) {
        item.SMS = !item.SMS
        this.getMessageSet()
      },
      handleWXClick(item) {
        item.WX = !item.WX
        this.getMessageSet()
      },
      getMessageSet() {
        const params = {
          options: JSON.stringify(this.options),
          uid: this.uid
        }
        messageOptionsSet(params).then(res => {
          if (res.status === 200) {
            this.$toastVant.success(res.message)
            this.getOptions()
          }
        }).catch(err => {
          this.$toastVant.fail(err.message)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/style/common.scss";

  /deep/ .m-button .el-button {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .notification-management {
    .content {
      padding-bottom: 400px;

      .content-head {
        display: flex;
        align-items: center;
        font-size: 18px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;

        .title {
          width: 70%;
        }

        .program-1,
        .program-2 {
          width: 15%;
          text-align: center;
        }
      }

      .list {
        .item {
          display: flex;
          align-items: center;
          padding: 20px 0;

          &:not(:last-of-type) {
            border-bottom: solid 1px #eaeaea;
          }

          .title {
            width: 70%;
          }

          .btn-1,
          .btn-2 {
            width: 15%;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
</style>
